The ajax theme extends the xhtml theme, providing AJAX features on top of everything provided by its parent theme. This theme uses two popular AJAX/JavaScript libraries: Dojo and DWR. These AJAX features are:

• AJAX Client Side Validation
• Remote form submission support (works with the submit tag as well)
• An advanced div template that provides dynamic reloading of partial HTML
• An advanced a template that provides the ability to load and evaluate JavaScript remotely
• An AJAX-only tabbedPanel implementation
• A rich pub-sub event model

Browser Compatibility

AJAX (as a technology) uses a browser side scripting component that varies between browers (and sometimes versions). To hide those differences from the developer, we utilize the dojo toolkit (http://www.dojotoolkit.org). The following browsers are supported by dojo, and any UI's created with the AJAX theme should act the same for all those browsers listed below:

• IE 5.5+
• FF 1.0+
• Latest Safari (on up-to-date OS versions)
• Latest Opera
• Latest Konqueror

Extending the XHTML Theme

The wrapping behavior provided by this theme is almost exactly like that provided by the xhtml theme. The only difference is that the controlheader.ftl template is slightly different:

<#--include "/${parameters.templateDir}/xhtml/controlheader-core.ftl" /-->
<#if parameters.form?exists && parameters.form.validate?default(false) == true>
	<#-- can't mutate the data model in freemarker -->
    <#if parameters.onblur?exists>
        ${tag.addParameter('onblur', "validate(this);${parameters.onblur}")}
    <#else>
        ${tag.addParameter('onblur', "validate(this);")}
    </#if>
</#if>
<#include "/${parameters.templateDir}/${themeProperties.parent}/controlheader.ftl" />

This provides for AJAX Client Side Validation by checking if the validate attribute is set to true. If it is, on each onblur event for HTML Tags, a validation request is made. Some people don't like the onblur behavior and would rather a more advanced timer (say, 200ms) be kicked off after every keystroke. You can override this template and provide that type of behavior if you would like.

Special Notes

While most of the templates in this theme are self explanatory, there are some templates that should be called out and explained in detail:

Especially with this theme, it is strongly recommended you use the head tag. See the ajax head template for more information. Without it, you most likely not have AJAX support set up properly.

• ajax head template
• ajax div template
• ajax a template

In addition to these templates, it is important to make yourself familiar with the ajax event system provided by WebWork and Dojo.